import {defineComponent, onMounted, onUnmounted, ref} from 'vue';
import Style from "./1080.module.scss";
import Image14 from '@/assets/images/14.png';
import Image12 from '@/assets/images/12.png';
import Image18 from '@/assets/images/18.png';
import Image16 from '@/assets/images/16.png';
import Image3 from '@/assets/images/3.png';
import Image6 from '@/assets/images/6.png';
import Image9 from '@/assets/images/9.png';
import ImageDy from '@/assets/images/dy.png';
import Image13 from '@/assets/images/13.png'

import { useRouter } from 'vue-router';
import { KEEP_VIDEO_TOP } from '~/src/config';
import {getMzjf, getTitle} from "@/api/his";
import {IHomePageTitle,IRouter} from "@/api/typing";
import yellowImg from '@/assets/images/15.png'
import blueImg from '@/assets/images/11.png'



export default defineComponent({
    setup() {

        const router = useRouter();

        const fetchHashValue = async () => {
            try {

                const response = await fetch('/dist/index.html'); // 指向你的index.html文件
                const text = await response.text();
                const regex = /<script type="module" crossorigin src="\.\/assets\/index\.([a-z0-9]+)\.js"><\/script>/;
                const match = text.match(regex);
                if (match && match[1]) {
                    console.log('找到的hash值是:', match[1]);
                    return match[1]; // 返回哈希值
                } else {
                    console.log('未找到hash值');
                    return null;
                }

            } catch (error) {
                console.error('获取hash值失败:', error);
            }
        };

        let timmer: any = null
        onMounted(() => {
            timmer = setInterval(() => fetchHashValue(), 10000)
        })

        onUnmounted(() => {
            clearInterval(timmer)
        })
        const handleClick = (item: IHomePageTitle) => {
            if (item.to) {
                router.push({
                    path: item.to, query: {
                        itemInfo: JSON.stringify(item?.data)
                    }
                })
            }
        }
        const titleMax = ref<IHomePageTitle []>([])
        const titleMoreMax = ref<IHomePageTitle []>([])
        const titleMin = ref<IHomePageTitle []>([])
        const titleMoreMin = ref<IHomePageTitle []>([])
        // 获取TitleMax
        async function getTitleMaxData() {
            const res: any = await getTitle({})
            // 大标题
            let max = res.rows[0].titleMax!;
            console.log("max",max)
            // 做路由映射，过滤不显示的
            max = max
                .filter((item: IHomePageTitle) => item.is_show)
                .map((item: IHomePageTitle) => {
                    // 检查item.to是否是IRouter的有效键
                    const key = item.to as keyof typeof IRouter;
                    // 如果存在对应值则使用，否则设为null
                    const toValue = IRouter.hasOwnProperty(key) ? IRouter[key] : null;

                    return {
                        ...item,
                        to: toValue
                    }
                });
            //如果max长度大于4个。
            if (max.length > 4) {
                //取出max的前三个放入titleMax
                titleMax.value = max.slice(0, 3);
                //剩余的放入titleMoreMax
                titleMoreMax.value = max.slice(3, max.length);
                titleMax.value.push({
                    title: '更多',
                    desc: '',
                    img: yellowImg,
                    icon: ImageDy,
                    is_show: true,
                    to:'/moreTitle',
                    data:titleMoreMax.value
                })
            }else {
                titleMax.value = max;
            }
            // 小标题处理
            let min = res.rows[0].titleMin!;
            console.log("min",min)
            // 做路由映射，过滤不显示的
            min = min
                .filter((item: IHomePageTitle) => item.is_show)
                .map((item: IHomePageTitle) => {
                    // 检查item.to是否是IRouter的有效键
                    const key = item.to as keyof typeof IRouter;
                    // 如果存在对应值则使用，否则设为null
                    const toValue = IRouter.hasOwnProperty(key) ? IRouter[key] : null;

                    return {
                        ...item,
                        to: toValue
                    }
                });
            if (min.length > 4) {
                //取出min的前三个放入titleMin
                titleMin.value = min.slice(0, 3);
                //剩余的放入titleMoreMin
                titleMoreMin.value = min.slice(3, min.length);
                titleMin.value.push({
                    title: '更多',
                    desc: '',
                    img: blueImg,
                    icon: Image6,
                    is_show: true,
                    to:'/moreTitle',
                    data:titleMoreMin.value
                })

            }else {
                titleMin.value = min;
            }
        }
        getTitleMaxData();
        return () => (<>
            {
                !KEEP_VIDEO_TOP? <div class={Style.video}>
                    <div class={Style.video_pad}>
                        <video class="vid" style={{ width: '100%', height: '100%' }} id="video" src="http://ld.zjldsoft.com:80/ldzzj/ldzzj/api?code=env.vedio&_t=" autoplay="true" loop muted>
                        </video>
                    </div>
                </div>:""
            }


            <div class={Style.content_mar}>
                <div class={Style.content}>
                    {/*//大标题*/}
                    {titleMax.value
                        .map((item, index) => (
                            <div class={Style.item}
                                 style={{backgroundImage: `url(${item.img})`}}
                                 onClick={() => {handleClick(item)}}
                                 key={index}
                            >
                                <div>
                                    <div class={Style.text1}>
                                        {item.title}
                                    </div>
                                    <div class={Style.text2}>
                                        {item.desc}
                                    </div>
                                </div>
                                <img class={Style.item_icon} src={item.icon} />
                            </div>
                        ))}
                    {/*小标题*/}
                    <div class={Style.min_content}>
                        {titleMin.value
                            .map((item, index) => (
                                <div class={Style.min_item}
                                     style={{backgroundImage: `url(${item.img})`}}
                                     onClick={() => {handleClick(item)}}
                                     key={index}
                                >
                                    <div class={[Style.min_img, Style.img1]}>
                                        <img class={Style.min_icon}  src={item.icon} />
                                    </div>
                                    <div class={Style.min_item_text}>
                                        {item.title}
                                    </div>
                                </div>
                            ))}
                    </div>
                </div>
            </div>

        </>);
    }
})
